<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Mermaid Quick Test Page</title>
  <link rel="icon" type="image/png" href="">
  <style>
    .mermaid2 {
      display: none;
    }
  </style>
</head>
<body>
  <div style="display: flex">
  <div id="FirstLine" class="mermaid">
    graph TB
      Function-->URL
      click Function clickByFlow "Add a div"
      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div id="FirstLine" class="mermaid">
  graph TB
    1Function--->2URL
    click 1Function clickByFlow "Add a div"
    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
  <div id="FirstLine" class="mermaid">
    flowchart TB
      Function-->URL
      click Function clickByFlow "Add a div"
      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div>
<div id="FirstLine" class="mermaid">
  flowchart TB
    1Function--->2URL
    click 1Function clickByFlow "Add a div"
    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div>

<div id="FirstLine" class="mermaid">
  classDiagram
    class ShapeLink
    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
    class ShapeCallback
    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div>
<div id="FirstLine" class="mermaid">
  classDiagram-v2
    class ShapeLink2
    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
    class ShapeCallback2
    callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</div>

</div>

<div class="mermaid">
    gantt
    dateFormat  YYYY-MM-DD
    axisFormat  %d/%m
    title Adding GANTT diagram to mermaid
    excludes weekdays 2014-01-10

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2               :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Clickable
    Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
    Calling a Callback (look at the console log) :cl2, after cl1, 3d
    Calling a Callback with args :cl3, after cl1, 3d

    click cl1 href "http://localhost:9000/webpackUsage.html"
    click cl2 call clickByGantt()
    click cl3 call clickByGantt("test1", test2, test3)

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      : 20h
    Add another diagram to demo page    : 48h
      </div>
  <div style="display: flex">
    <div id="FirstLine" class="mermaid">
      graph TB
        FunctionArg-->URL
        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
    </div>
    <div id="FirstLine" class="mermaid">
      flowchart TB
        FunctionArg-->URL
        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
        click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
    </div>
    
    <div id="FirstLine" class="mermaid">
      classDiagram
      class ShapeLink
      link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
      class ShapeCallback
      click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
    </div>

    <div id="FirstLine" class="mermaid">
      classDiagram-v2
        class ShapeLink2
        link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
        class ShapeCallback2
        click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
    </div>
    
  </div>
    
  <script src="./mermaid.js"></script>
  <script>
  function clickByFlow(elemName) {
    const div = document.createElement('div');
    div.className = 'created-by-click';
    div.style = 'padding: 20px; background: green; color: white;';
    div.innerText = 'Clicked By Flow';

    document.getElementsByTagName('body')[0].appendChild(div);
  }
  function clickByFlowArg(argument) {
    const div = document.createElement('div');
    div.className = 'created-by-click-2';
    div.style = 'padding: 20px; background: green; color: white;';
    div.innerText = 'Clicked By Flow: ' + argument;

    document.getElementsByTagName('body')[0].appendChild(div);
  }
  function clickByGantt(arg1, arg2, arg3) {
    const div = document.createElement('div');
    div.className = 'created-by-gant-click';
    div.style = 'padding: 20px; background: green; color: white;';
    div.innerText = 'Clicked By Gant';
    if (arg1) div.innerText += ' ' + arg1;
    if (arg2) div.innerText += ' ' + arg2;
    if (arg3) div.innerText += ' ' + arg3;

    document.getElementsByTagName('body')[0].appendChild(div);
  }
  function clickByClass(arg) {
    const div = document.createElement('div');
    div.className = 'created-by-class-click';
    div.style = 'padding: 20px; background: purple; color: white;';
    div.innerText = 'Clicked By Class' + (arg ? arg : '');

    document.getElementsByTagName('body')[0].appendChild(div);
  }
  mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
  </script>
</body>
</html>
